import React, { useEffect, useMemo, useState } from 'react';
import { Divider, Descriptions, Popconfirm, Spin } from 'antd';
import { getLogisticsInfo, inStock, getShopInfo1 } from '@/services/shop/api';
import { MsgType, showMsg, isNull, isExits } from '@/utils/utils';

const { Item } = Descriptions

const RefundInfo: React.FC<{apply_id: string; title: string; applyInfo: Object, reload: () => void}> = (props) => {
  const { apply_id, title, applyInfo={}, reload } = props;
  const [logisticsInfo, setLogisticsInfo] = useState<any>({})
  const [shopInfo, setShopInfo] = useState({});
  const [loading, setLoading] = useState(false);

  const fetchShopInfo = async () => {
    try {
      const data = await getShopInfo1(applyInfo.order_id)
     setShopInfo(data)
    } catch (error) {
      showMsg(error?.data?.errmsg)
    }
  }

  const fetchLogisticsInfo = async () => {
    try {
      const data = await getLogisticsInfo(apply_id)
     setLogisticsInfo(data)
    } catch (error) {
      showMsg(error?.data?.errmsg)
    }
  }
  useEffect(() => {
    if (apply_id) {
      fetchLogisticsInfo();
      fetchShopInfo();
    }
  }, [apply_id]);

  let sh_status = '';
  
  if (applyInfo.after_sales_status === 'M') {
    sh_status = applyInfo.return_way === '1' ? '待寄回' : '待送回';
  } else {
    sh_status = logisticsInfo.status === 'U' ? (applyInfo.return_way === '1' ? '待寄回' : '待送回') : logisticsInfo.status === 'S' ? '已收货' : logisticsInfo.status === 'W' ? '待收货' : '';
  }

  return <div className="service-record after-record">
     <div className="header">
        <div className="title">{title}</div>
      </div>
      
      <Divider style={{margin: '10px 0 0px !important'}} />
      
      <Spin spinning={loading} >
        <Descriptions 
          style={{ marginTop: 15 }} 
          layout="vertical" 
          column={ applyInfo.return_way === '1' ? 8 : 6} 
          bordered 
          className="refund-descriptions"
          size="small">
          <Item label="退货方式"> 
            {applyInfo.way === '1' ? (applyInfo.return_way === '1' ? '快递寄回' : '送回指定地点') : '退款'}
          </Item>
          <Item label="收货人">
            {shopInfo.refund_liaison_person || '-'}
          </Item>
          <Item label="手机号码">
            {shopInfo.refund_liaison_mobile || '-'}
          </Item>
          <Item label="退货地址">
            {applyInfo.return_way === '1' ? (shopInfo.refund_address || '-') : (shopInfo.refund_self_address || '-')}
          </Item>
          {
            applyInfo.return_way === '1' &&
            <>
              <Item label="快递公司">
                {logisticsInfo.express_company || '-'}
              </Item>
              <Item label="物流单号">
                {logisticsInfo.express_id || '-'}
              </Item>
            </>
          }
          <Item label="状态">
            {sh_status}
          </Item>
          <Item label="操作">
            {
              // 受理中
              (isExits('600613005') && applyInfo.apply_status === 'H' &&
                // 退货 && 待收货
                ((applyInfo.return_way === '1' && logisticsInfo.status === 'W') ||
                // 送回 && 待寄回
                (applyInfo.after_sales_status === 'M' && applyInfo.return_way === '2'))) ?
              <>
                <Popconfirm 
                  okText="确认收货"
                  cancelText="再想想"
                  onConfirm={async () => {
                    setLoading(true);
                    try {
                      await inStock({
                        address: logisticsInfo.address,
                        apply_id,
                        express_company: logisticsInfo.express_company,
                        express_id: logisticsInfo.express_id,
                        mobile: logisticsInfo.mobile,
                        receiver: logisticsInfo.receiver,
                        return_way: applyInfo.return_way,
                        return_id: logisticsInfo.return_id
                      })
                      setLoading(false);
                      showMsg('已保存', MsgType.SUCCESS)
                      await fetchShopInfo();
                      await fetchLogisticsInfo()
                      reload?.();
                    } catch (error) {
                      setLoading(false);
                      showMsg(error?.data?.errmsg)
                    }
                  }}
                  title={<div>确认收货入库后，系统将发起退款流程，<br />请确保核对正确后操作</div>}>
                  <a>收货入库</a>
                </Popconfirm>
              </> : '-'
            }
            
          </Item>
        </Descriptions>
    </Spin>
  </div>
}
export default RefundInfo;